<template>
  <view class="input-number">
    <view class="input-number-reduce" :class="{ 'bg-gray': current <= 0 }" @tap="reduce">-</view>
    <view class="input-number-inner"><input type="number" disabled :value="values[current]" /></view>
    <view class="input-number-add" :class="{ 'bg-gray': offAdd || current >= values.length - 1 }" @tap="add">+</view>
  </view>
</template>

<script>
let timer = null;
export default {
  props: {
    value: {
      type: Number,
      default: 0
    },
    values: {
      type: Array,
      default: function() {
        return [0, 88, 666, 888];
      }
    },
    // 禁止增加
    offAdd: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      current: 0
    };
  },
  watch: {
    value(n) {
      this.current = this.values.indexOf(n);
    },
    current(n) {
      this.$emit("input", this.values[n]);
    }
  },
  methods: {
    add() {
      if (this.offAdd || this.current >= this.values.length - 1) return false;
      this.current++;
    },
    reduce() {
      if (this.current <= 0) return false;
      this.current--;
    }
  }
};
</script>
<style lang="scss" scoped>
$border-color: #eeeeee;
$size: 55upx;
$width: $size - 10upx;
.input-number {
  overflow: hidden;
  z-index: 0;
}
.input-number-reduce,
.input-number-add {
  float: left;
  font-size: 30upx;
  width: $width;
  height: $size;
  text-align: center;
  line-height: $size;
}
.input-number-reduce {
  height: 100%;
  border: 1upx solid $border-color;
}
.input-number-add {
  height: 100%;
  border: 1upx solid $border-color;
}
.input-number-inner {
  height: 100%;
  border-top: 1upx solid $border-color;
  border-bottom: 1upx solid $border-color;
  float: left;
  width: calc(100% - #{$width * 2});
  input {
    font-size: 26upx;
    width: 100%;
    height: $size !important;
    line-height: $size !important;
  }
}
</style>
